<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import {
	getProgramList,
	deleteProgram,
	getUserInfo
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const tableHeight = ref(0);
const open = ref(false);
const id = ref('');
const code = ref('');
const data = ref([]);
const page = ref(1);
const pageSize = ref(15);
const totals = ref(1);
const pageSizeChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pageChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pagination = ref({
	// 表格分页的配置
	pageSize,
	current: page,
	total: totals,
	showTotal: (totals) => `共 ${totals} 条`,
	onShowSizeChange: pageSizeChange,
	onChange: pageChange
});
const columns = [
	{
		title: '操作',
		key: 'operation',
		fixed: 'left',
		width: 200
	},
	{
		title: '项目名称',
		dataIndex: 'programName',
		key: 'programName'
	},
	{
		title: '创建时间',
		dataIndex: 'createDate',
		key: 'createDate'
	},
	{
		title: '更新时间',
		dataIndex: 'updateDate',
		key: 'updateDate'
	}
];
const router = useRouter();
const getInfo = () => {
	account.spinning = true;
	getProgramList({
		programName: code.value,
		pageNum: page.value,
		pageSize: pageSize.value
	})
		.then((res) => {
			data.value = res.list;
			totals.value = res.total;
			getUserInfo({ account: account.account })
				.then((res) => {
					account.spinning = false;
					account.programes = res.programes.split(',');
				})
				.catch((err) => {
					account.spinning = false;
					message.error(err);
				});
		})
		.catch((err) => {
			account.spinning = false;
			message.error(err);
		});
};
onMounted(() => {
	tableHeight.value = document.getElementById('main').offsetHeight - 220;
	getInfo();
});
watch(
	() => account.currentPrograme,
	(_val, oldVal) => {
		getInfo();
	}
);
const onSearch = () => {
	getInfo();
};
const edit = (i) => {
	console.log(i);
	router.push({ path: '/main/program/edit', query: i });
};
const del = (i) => {
	id.value = i.id;
	open.value = true;
};
const handleOk = () => {
	account.spinning = true;
	deleteProgram({ id: id.value })
		.then((res) => {
			open.value = false;
			getInfo();
		})
		.catch((err) => {
			message.error(err);
		});
};
const add = () => {
	router.push({ path: '/main/program/edit' });
};
</script>

<template>
	<section class="operation">
		<section class="search">
			<a-input
				v-model:value="code"
				placeholder="请输入项目名称"
				@pressEnter="onSearch"
				:style="{ marginLeft: '10px' }"
			/>
		</section>
		<section>
			<a-button
				type="primary"
				@click="onSearch"
				:style="{ marginRight: '10px' }"
				>查询</a-button
			>
			<a-button
				type="primary"
				@click="add"
				:style="{ marginRight: '10px' }"
				>新增</a-button
			>
		</section>
	</section>
	<a-table
		:columns="columns"
		:data-source="data"
		:pagination="pagination"
		:scroll="{ y: tableHeight }"
	>
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === 'operation'">
				<section class="col">
					<a-button
						type="primary"
						ghost
						:disabled="account.level === '3'"
						:style="{ marginRight: '10px' }"
						@click="edit(record)"
						>修改</a-button
					>
					<a-button
						type="primary"
						danger
						ghost
						@click="del(record)"
						:disabled="account.level === '3'"
						>删除</a-button
					>
				</section>
			</template>
		</template>
	</a-table>
	<a-modal
		v-model:open="open"
		title="删除"
		centered
		@ok="handleOk"
		@cancel="open = false"
		okText="确认"
		cancelText="取消"
		:closable="false"
		:keyboard="false"
		:maskClosable="false"
	>
		<p>确认删除该条数据？</p>
	</a-modal>
</template>

<style scoped>
.search {
	display: flex;
}
.operation {
	display: flex;
	align-content: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.col {
	display: flex;
	align-content: center;
	justify-content: space-between;
}
</style>
